<template>
	<view>
		<u-navbar title='个人中心' :autoBack="true" leftIconColor="white" :placeholder="true" :bgColor='color' titleStyle="color:white"></u-navbar>
		<view class="main">
			<view class="userInfo">
				<view>
					<view>账号:</view>
					<view class="info">
						<text>{{userInfo.userName}}</text>
						<u-icon name='arrow-right'></u-icon>
					</view>
				</view>
				<view>
					<view>用户ID:</view>
					<view class="info">
						<text>{{userInfo.userId}}</text>
						<u-icon name='arrow-right'></u-icon>
					</view>
				</view>
				<view>
					<view>手机:</view>
					<view class="info">
						<text>{{userInfo.phoneNum}}</text>
						<u-icon name='arrow-right'></u-icon>
					</view>
				</view>
				<view @click="call">
					<view>客服</view>
					<view class="info">
						<text>{{servicePhone}}</text>
						<u-icon name='arrow-right'></u-icon>
					</view>
				</view>
			</view>
			<u-button :color='color' shape="circle" @click='logOut'> 登出</u-button>
		</view>
		<addTip tip='点击客服电话,可以直接拨打!' />
	</view>
</template>

<script>
	let app = getApp();
	import addTip from '@/components/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue'
	export default {
		components: {
			addTip,
		},
		data() {
			return {
				color: app.globalData.defaultColor,
				userInfo: null,
				servicePhone: '18975410693',
				passShow:false
			}
		},
		onShow() {
			uni.$u.http.get('/user/userInfo').then(res => {
				this.userInfo = res;
			})
		},
		methods: {
			logOut() {
				uni.$u.http.post('/user/logout').then(res => {
					uni.$u.toast('退出登录成功!');
					setTimeout(() => {
					 uni.switchTab({
					 	url:'/pages/mine/index'
					 })
					},1000)
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.servicePhone,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 40rpx;
		width: calc(100% - 80rpx);
		font-size: 15px;
	}

	.userInfo {
		margin-bottom: 50rpx;
	}

	.userInfo>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		padding: 40rpx 0;
	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>